<template>
  <div>
    <div class="w-form-header">
      <el-button v-if="fileUrl" type="primary" @click="print()">打印</el-button>
    </div>
    <div id="printExcelId">
      <Office v-if="fileUrl" v-model="fileUrl"></Office>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"
import Office from '@/components/office/index.vue'
import { ref } from "vue";
import printJs from 'print-js'
import 'print-js/dist/print.css'

defineOptions({
  name: 'Print'
})

const route = useRoute()
const router = useRouter()

const fileUrl = ref('')
const flag = ref('') // 为false时需要展示打印按钮

const init = () => {
  // console.log('===========>', route.query.fileUrl);
  fileUrl.value = decodeURIComponent(route.query.fileUrl);
  flag.value = !route.query.flag;
}

init()

function print() {
  // 获取canvas画布的dom
  const printDom = document.getElementsByClassName('x-spreadsheet-table');
  // console.log('printDom========>', printDom.length);
  // 转换成图片
  if (printDom && printDom.length > 0) {
    const imgData = printDom[0].toDataURL('image/png');
    // 打印图片
    printJs({
      printable: imgData, // 将图片数据作为打印内容
      type: 'image', // 打印类型设置为image
      style: `body{margin:0}`
    });
  }
}

</script>

<style scoped>

</style>
